<html>
	<head>
		<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
		<script src="/js/jquery.js" type="text/javascript"></script>
		<title>Mail Jetable</title>
		<script type="text/javascript">
			var lastMsgId="";
			var owner ="{{owner}}";
			function setlastMsgId(id,force)
			{
				if(lastMsgId!="" && force)
					lastMsgId=id
				else if(lastMsgId=="")
					lastMsgId=id
			}
		</script>
	</head>
	<body>
<div class="container_12 grid_12" style="position: absolute;margin-left:-480px;left:50%">
	<div class="grid_12" style="text-align:center"><h1>Visualisation des mails re&ccedil;u</h1> <h4>({{owner|escape}}@mail-jetable.appspotmail.com)</h4></div>
	<div id="nextMessages"></div>
     {% if mails%}
    {% for mail in mails %}
	<script type="text/javascript">setlastMsgId('{{mail.id}}',false)</script>
	<div class="grid_12 head read_{{mail.read}}" lang="{{mail.id}}">
	<span class="de">De : {{mail.sender|escape}}</span>Sujet : {{mail.subject|escape}} <em>Re&ccedil;u &agrave; : {{ mail.date  }}</em>
	<span class="delete"><a href="/displayContent?id={{mail.id}}&type=delete&owner={{mail.owner}}">[X]</a></span>
	</div>
	<div id="{{mail.id}}" style="display:none;" class="grid_12 body">
		<input class="readSource" type="button" value="Source" />
		<iframe style="width:100%;border-width:0px;" src="/displayContent?id={{mail.id}}&type=body"></iframe>
	</div>
    {% endfor %}
    {% else %}
<div class="grid_5 prefix_4" style="text-align:center">Vous n'avez pas encore re&ccedil;u de mails.<br />Vous pouvez rafraichir cette page en appuyant sur F5.<br /><br />Sinon, les donn&eacute;es sont rafraichies toutes les 5 secondes.</div>
    {%endif%}
    
	<div class="grid_12">&nbsp;</div>
	
	<div class="grid_12 footer" style="text-align:center">&copy; 2010 Grigis Gaetan - <a href="http://blog.gaetan-grigis.eu">LoupZeur</a></div>
	<script type="text/javascript">	
	function getNextMessages()
	{
		$.getJSON("/displayContent?id="+lastMsgId+"&type=json&owner="+owner,function(data,status){
			if(status=="success")
			{
			//alert(data)
				if(data!=null)
				{
					for(i=0;i<data.length;i++)
					{
						$("#nextMessages").prepend('<div onclick="readMail($(this))" class="grid_12 head read_'+data[i][4]+'" lang="'+data[i][5]+'"><span class="de">De : '+data[i][1]+'</span>Sujet : '+data[i][2]+' <em>Re&ccedil;u &agrave; : '+data[i][0]+'</em><span class="delete"><a href="/displayContent?id='+data[i][5]+'&type=delete&owner='+owner+'">[X]</a></span></div><div id="'+data[i][5]+'" style="display:none;" class="grid_12 body"><input class="readSource" onclick="readSource($(this))" type="button" value="Source" /><iframe style="width:100%;border-width:0px;" src="/displayContent?id='+data[i][5]+'&type=body"></iframe></div>');
	/*					console.log(data[i][0]); //date
						console.log(data[i][1]); //envoyeur
						console.log(data[i][2]); //sujet
						console.log(data[i][3]); //body
						console.log(data[i][4]); //read
						console.log(data[i][5]); //id*/
						setlastMsgId(data[i][5],true)
						$(".prefix_4").hide()
					}
				}
			}
		});
		setTimeout("getNextMessages()",20000);
	}
	
	function readMail(elem)
	{
		var id=elem.attr("lang");
		var cc=elem.attr("class");
		r = new RegExp("read_true$","gi");
		if(!cc.match(r))
		{
			$.get("/displayContent?id="+id+"&type=read",function(data,status){
				if(status=="success")
				{
					elem.removeClass('read_False');
					elem.addClass('read_True');
				}
			});
		}
		$("#"+id).toggle();
	}
	function readSource(elem)
	{
		var reg = new RegExp("type=(body|source)")
		var src = elem.next("iframe").attr('src')
		if(src.match(reg))
		{
			switch(RegExp.lastParen)
			{
				case 'body':src=src.replace('body','source');elem.attr("value","HTML");break;
				case 'source':src=src.replace('source','body');elem.attr("value","Source");break;
			}			

			elem.next("iframe").attr('src',src)
		}
	}
	$(document).ready(function() {
		$("div.head").click(function(){
			readMail($(this))
		});
		$("input.readSource").click(function(){
			readSource($(this))
		});
	});
	setTimeout("getNextMessages()",5000);
	</script>
  </body>
</html>
